'use client';

import { useContext, useState } from 'react';
import classNames from 'classnames';
import { CONFIG_TYPE_KEY } from '@/lib/constant';
import { ConfigAdminContext } from '@/contexts/admin/config';
import UpdateConfigAdminPage from '@/app/[locale]/admin/config/update';
import DetailsConfigAdminPage from '@/app/[locale]/admin/config/detail';

export default function ListConfigAdminPage(this: any) {
  const [currentItemId, setCurrentItemId] = useState<string>();
  const [detailItem, setDetailItem] = useState<{ id: string }>();
  const [updateItem, setUpdateItem] = useState<{ id: string }>();
  const context = useContext(ConfigAdminContext);

  function onClickDetail(item: string) {
    setCurrentItemId(item);
    setDetailItem({
      id: item,
    });
  }

  function onClickUpdate(item: string) {
    setUpdateItem({
      id: item,
    });
  }

  return (
    <ConfigAdminContext.Provider
      value={{
        ...context,
        detailItem,
        updateItem,
        setDetailItem,
        setUpdateItem,
      }}
    >
      <div className="row">
        <div className="col">
          <div className="vstack gap-4">
            <div className="row">
              <div className="col">
                <div className="card">
                  <div className="card-header bg-transparent"></div>
                  <div className="card-body">
                    <div className="table-responsive">
                      <table className="table table-hover align-middle">
                        <thead>
                          <tr className="text-nowrap">
                            <th scope="col" className="w-5">
                              <div className="form-check">
                                <input
                                  className="form-check-input"
                                  type="checkbox"
                                  disabled
                                />
                              </div>
                            </th>
                            <th scope="col" className="w-10">
                              ID
                            </th>
                            <th scope="col" className="w-10">
                              名称
                            </th>
                            <th scope="col" className="w-10"></th>
                          </tr>
                        </thead>
                        <tbody>
                          {[
                            'user',
                            'site',
                            'jwt',
                            'section',
                            'post',
                            'qq',
                            'image',
                            'phone',
                            'email',
                            'client',
                          ].map((item) => {
                            return (
                              <tr
                                key={item}
                                className={classNames('text-nowrap', {
                                  'table-active': currentItemId === item,
                                })}
                              >
                                <td>
                                  <div className="form-check">
                                    <input
                                      disabled
                                      className="form-check-input"
                                      type="checkbox"
                                    />
                                  </div>
                                </td>
                                <td
                                  className="cursor-pointer"
                                  onClick={onClickDetail.bind(this, item)}
                                >
                                  {item}
                                </td>
                                <td
                                  className="cursor-pointer"
                                  onClick={onClickDetail.bind(this, item)}
                                >
                                  {CONFIG_TYPE_KEY[item]}配置
                                </td>
                                <td>
                                  <button
                                    onClick={onClickUpdate.bind(this, item)}
                                    className="btn btn-sm btn-light me-2"
                                    type="button"
                                  >
                                    <i className="bi bi-pencil me-2"></i>
                                    修改
                                  </button>
                                </td>
                              </tr>
                            );
                          })}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {detailItem && <DetailsConfigAdminPage />}

            {updateItem && <UpdateConfigAdminPage />}
          </div>
        </div>
      </div>
    </ConfigAdminContext.Provider>
  );
}
